@import "variables";

.add-metric-button {
  margin: 8px 0;
  display: block;
}

.wrap {
  padding: 24px;
  overflow: scroll;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.layout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #3c4344ab; 
}

.buttons {
  display: flex;
  justify-content: flex-end;
  .button {
    padding: 12px;
  }
}

.metrics {
  &__table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 12px;
    &-row {
      border-bottom: 1px solid $neutral-color-200;
      &--disabled {
        background: $neutral-color-100;
      }
    }
    &-cell {
      padding: 10px 6px;
      color: $neutral-color-800;
      font-family: $font-family-light;
    }
    &-head {
      color: $neutral-color-900;
      font-family: $font-family-bold;
      font-size: 12px;
    }
  }
}

.metric {
  &__actions {
    display: flex;
  }
  &__action {
    cursor: pointer;
    color: $neutral-color-700;
    margin-left: 8px;
    &:hover {
      color: $neutral-color-900;
    }
  }
}